<style>
	input::placeholder,.uni-input-placeholder.placeholder{
		text-align: right;
		font-size: 12px;
	}
	.uni-input-input{
		text-align: right !important;
	}
	.c1{
		display: grid;
		grid-template-rows: 40% auto;
		
	}
	uni-page-body,.c1,.c2{
		height: 100%;
	}
	uni-page-body{
		padding-top: 0px !important;
	}
	.c3{
		text-align: center;
		display: grid;
		grid-template-rows:  auto 50px auto;
		background: url(/static/bg.jpg);
  		background-size:  100% 180%;
  		animation: moveBackground 30s linear infinite;
  		background-blend-mode: multiply;
  background-color: #ccccccbf;
	}
	@keyframes moveBackground{
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: 0 100%;
		}
	}

	.c4{
		line-height: 50px;
		font-size: 24px;
		font-weight: bold;
	}
	
	.c0but{
		border-radius: 45px;
		background: #ff5f2e;
  color: #fff;
  font-weight: bold;
  border:none !important;
	}
	uni-button::after{
		border:none !important;
	}
	.uni-list-cell{
		display: grid;
  grid-template-columns: 50px auto;
  grid-column-gap: 10px;
  font-size: 12px;
	}
	.c6{
		padding-left: 15px;
  		padding-right: 15px;
  		padding-top: 20px;
	}
	.c7{
		padding-left: 15px;
  		padding-right: 15px;
  		line-height: 45px;
  		
	}
	.br{
		margin-top: 30px;
	}
	.border{
		border-bottom: 1px solid #88888873;
	}
	.c10{
/*		display: none;*/
	}
	.tit{
		font-size: 12px !important;
	}
	.uni-list.c7.br{
		margin-top: 8px;
  background: #fff;
	}
	.add-btn{
		background: #17ce08 !important;
  color: #fff !important;
  height: 45px !important;
	}
	.content view{
		height: 40px;
	}
	.c30{
		padding-left: 15px;
  background: #fff;
  border-bottom: 1px solid #f8f8f8;
  height: 30px !important;
  line-height: 30px;
  font-size: 12px;
	}
	.uni-list.c7.br.bb{
		margin-top: 0px !important;
	}
	.row.b-b{
		margin-bottom: 8px;
	}
	uni-modal .uni-modal__btn.uni-modal__btn_default{
		display: none !important;
	}
	.c101{
/*		position: fixed;*/
		  width: 100%;
/*		  bottom: 50px;*/
	}
	.c100{
		height: 20px !important;
		font-size: 9px;
		color: #777;
		text-align: center;
  		line-height: 20px;
	}
</style>

<template>
	<view class="content">
		<view class="c30">填写信息</view>
		<view class="row b-b">
			<text class="tit">名称</text>
			<input class="input" type="text" style="text-align: right" v-model="addressData.name" placeholder="请输入菜品名称" placeholder-class="placeholder" />
		</view>
		
		
		<view class="c30">其他选项</view>
		<view class="uni-list c7 br bb">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					选择类型
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
						<view class="uni-input"  >{{array[index].name}}</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="row default-row">
			<text class="tit">早餐</text>
			<switch checked="true" v-model="addressData.default1" color="#fa436a" @change="switchChange1" />
		</view>

		<view class="row default-row">
			<text class="tit">午餐</text>
			<switch checked="true" v-model="addressData.default2" color="#fa436a" @change="switchChange2" />
		</view>

		<view class="row default-row">
			<text class="tit">晚餐</text>
			<switch checked="true" v-model="addressData.default3" color="#fa436a" @change="switchChange3" />
		</view>

		<view class="row default-row">
			<text class="tit">夜宵</text>
			<switch checked="true" v-model="addressData.default4" color="#fa436a" @change="switchChange4" />
		</view>

		

		<button class="add-btn" @click="confirm">提交</button>


		<view class="c101">
			<view class="c100">＊提示：添加的菜品仅本地储存，不会上传到服务器中保存。</view>
			<view class="c100">添加的菜品只在本机展现，无法分享传播，清空缓存将丢失菜品。</view>
		</view>

	</view>
</template>

<script>
	import cailist from "@/data/data.js";
	export default {
		data() {
			return {
				addressData: {
					name: '',
					mobile: '',
					addressName: '在地图选择',
					address: '',
					area: '',
					default1: 1,
					default2: 1,
					default3: 1,
					default4: 1,
					type:""
				},
				array: [{name: '随便凑合'}, {name:'大吃一顿'}],
				index: 0,
				array1: [
					{name: '不限'},
					{name: '早餐'}, 
					{name: '午餐'}, 
					{name: '晚餐'},
					{name: '夜宵'}
				],
				index1:0,
				styleshow:false,
				cailist:cailist.cailist
			}
		},
		onLoad(option){


			// let sscailist=this.cailist;
			// sscailist.reverse();
			// this.cailist=sscailist;


			// let cailists=localStorage.getItem("cailist");
			// if (!cailists) {
			// 	localStorage.setItem('cailist', JSON.stringify(this.cailist));
			// }else{
			// 	cailists=JSON.parse(cailists);
			// 	this.cailist=cailists;
			// }
			let cailists=uni.getStorageSync("cailist");
			if (!cailists) {
				uni.setStorageSync('cailist', JSON.stringify(this.cailist));
			}else{
				cailists=JSON.parse(cailists);
				this.cailist=cailists;
			}
		},
		methods: {
			switchChange1(e){
				
				if(e.detail.value==false){
					this.addressData.default1 = 0;
				}else{
					this.addressData.default1 = 1;
				}

			},
			switchChange2(e){
				if(e.detail.value==false){
					this.addressData.default2 = 0;
				}else{
					this.addressData.default2 = 1;
				}
			},
			switchChange3(e){
				
				if(e.detail.value==false){
					this.addressData.default3 = 0;
				}else{
					this.addressData.default3 = 1;
				}
			},
			switchChange4(e){
				if(e.detail.value==false){
					this.addressData.default4 = 0;
				}else{
					this.addressData.default4 = 1;
				}
				
			},
			//提交
			confirm(){
				// let data = this.addressData;
				if(!this.addressData.name){
					
					uni.showModal({
						title:"提示",
					    content: "请填写菜品标题",
					    showCancel:false,
					    success: (e)=>{
					    	
					    }
					});

					return;
				}

				if (!this.addressData.type || this.addressData.type==0) {
					this.addressData.type="随便凑合";
				}else{
					this.addressData.type="大吃一顿";
				}
				
				

				var arr={
					id:this.cailist[this.cailist.length-1].id+1,
					name:this.addressData.name,
					xftype:this.addressData.type,
					caitype:[
						this.addressData.default1,
						this.addressData.default2,
						this.addressData.default3,
						this.addressData.default4
					],
					status:true,
					del:0
				}
		    	
		    	// this.cailist.push(arr);
				
		    	this.cailist.unshift(arr);

				uni.showModal({
					title:"提示",
				    content: "保存成功",
				    showCancel:false,
				    success: (e)=>{
						// localStorage.setItem('cailist', JSON.stringify(this.cailist));
						uni.setStorageSync('cailist', JSON.stringify(this.cailist));
				    	setTimeout(()=>{
			    			uni.reLaunch({
			    				url:"/pages/set/set"
			    			});
			    		}, 200)
				    }
				});
				
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)

				this.addressData.type=e.detail.value;
				this.index = e.detail.value
			},
			//switch

		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
